<template>
  <div class="page">
    <!--header-->
  <div class="pt-header">
    <h1 class="header-logo"><a href="#" title="猴趣乐">LOGO</a> </h1>  
  </div>
   <div class="dt-paramselect">
  <div class="info-con">
      <div class="left f-fl">
        <img src="https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg">
      </div>
      <div class="right f-fl">
        <div class="con">
          <p class="price"><span><span ><span >价格：¥</span><span>{{ formatPrice(169) }}</span></span>
            </span>
          </p>
         <p class="sku"><span>进口香蕉</span></p>
         <p class="sku"><span>约250g，2根</span></p>
        </div>
      </div>
    </div>
    
    <div class="u-format">
      <div class="tt">数量</div>
      <div class="con m-selNumRow" >
        <div class="m-selnum " >
          <i class="less z-dis" @click="reduceNum"></i>
          <div class="textWrap" ><input type="tel" value="1"  v-model="number" ></div>
          <div class="more z-dis"  @click="addNum"></div>
        </div>
      </div>
    </div>
    </div>
    <van-goods-action>
      <van-goods-action-mini-btn icon="chat">
        客服
      </van-goods-action-mini-btn>
      <van-goods-action-mini-btn icon="cart" @click="onClickCart">
        购物车
      </van-goods-action-mini-btn>
      <van-goods-action-big-btn  @click="onClickshop">
        加入购物车
      </van-goods-action-big-btn>
      
      <van-goods-action-big-btn primary @click="onClickCart">
        立即购买
      </van-goods-action-big-btn>
    </van-goods-action>

  </div>
</template>
<script>
  import { Toast } from 'mint-ui'
  export default{
    data () {
    return {
      number: 1,
      curChoose: 0
    }
  },
    methods: {
       // ++ 数量
    addNum () {
      console.log('add')
     
      if (this.number >= 8) {
        Toast('超过最大数量')
        return false
      }
      this.number ++
    },
    // -- 数量
    reduceNum () {
     
      if (this.number <= 1) {
        Toast('最少购买一件')
        return false
      }
      this.number --
    },
     onClickCart() {
      this.$router.push('../cart');
    },
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    onClickshop(){
     Toast('加入购物车成功')
    }
     
    }
    
    

  }
</script>
<style scoped>
 .pt-header {
   min-height: 44px;
  height: 44px; 
  line-height: 40px;  
  position: relative; 
  background-color: #fff; 
  overflow: hidden; 
  }
  .header-logo { position: absolute; left: 1rem; bottom: .7rem; background-size: 180px 180px; background-position: 0 -142px; height: 28px; width: 260px;}
  .header-logo a { 
  display: inline-block; 
  background-size: 16rem 16rem;
  background-position: 0 -7.6rem;
  height: 100%; 
  width: 17rem; 
  text-indent: -9999px;
  background: url(/static/logo1.png) no-repeat; 
  }
  .dt-paramselect {
    padding: .4rem .4rem 1.73333rem;
    background-color: #fff;
    height: calc(100vh - 0.72rem - 1.38667rem);
  }
  
  .dt-paramselect .info-con {
    height: 17%;
    padding-bottom: .53333rem;
  }
  
  .dt-paramselect .info-con .right .price {
    font-size: 15px;
    padding-bottom: .13333rem;
    line-height: 1;
  }
  .price{
  color:#b4282d;
  padding:0 .26667rem;
  text-align:center;
  }
  img{
    width:100%;
    height:100%;
  }
  .dt-paramselect .info-con .right .sku {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .dt-paramselect .info-con .left {
    width: 25%;
    overflow: hidden;
    border-radius: .04rem;
    margin-right: -2.26667rem;
    background-color: #f4f4f4;
  }
  
  .dt-paramselect .info-con .left,
  .dt-paramselect .info-con .right {
    height: 100%;
  }
  
  .f-fl {
    float: left;
  }
  
  .dt-paramselect .info-con .right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    line-height: 1;
    margin-left: 2.58667rem;
  }
  .tab{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border-radius: 3px;
    padding: 0 .45333rem;
    font-size: 0.9rem;
    line-height: 1.8rem;
    margin-right: .32rem;
    margin-bottom: .21333rem;
    border: 1px solid #333;
  }
  .tab.tab-sel {
    border: 1px solid #b4282d;
    color: #b4282d;
}
   .tt {
    line-height: 1;
    font-size: .9rem;
    padding-bottom: .32rem;
}
/*- or +*/
/*- + 不可点击*/
.m-selnum.dlr {
    background-position: 0 -2.08rem;
}
/*+ 可以点击*/
.m-selnum.dl {
    background-position: 0 -1.04rem;
}
/*- + 都可以点击*/
.m-selnum {
    background-position: 0 -8.29333rem;
    width: 4.13333rem;
    height: .93333rem;
}
.m-selnum.allactive{
    background-position: 0 -8.29333rem;  
}
.m-selnum, .m-selnum-1 {
    display: inline-block;
    background-image: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/selnum-s2aa5e4fbe0-14d469f19a.png);
    background-repeat: no-repeat;
    background-size: 4.12rem 9.2rem;
    vertical-align: middle;
}
.m-selnum .less, .m-selnum .more {
    width: 1.2rem;
}
.m-selnum .less, .m-selnum .more, .m-selnum .textWrap {
    position: relative;
    float: left;
    height: .88rem;
}
.m-selnum .less, .m-selnum .more, .m-selnum .textWrap, .m-selnum input {
    border: none;
    background-color: transparent;
}
.m-selnum .textWrap {
    position: relative;
    width: 1.72rem;
    text-align: center;
    font-size: .32rem;
    line-height: .88rem;
}
.m-selnum .less, .m-selnum .more, .m-selnum .textWrap {
    position: relative;
    float: left;
    height: .88rem;
}
.m-selnum .less, .m-selnum .more, .m-selnum .textWrap, .m-selnum input {
    border: none;
    background-color: transparent;
}
.m-selnum .textWrap input {
    position: relative;
    z-index: 1;
    font-size: .32rem;
}
.m-selnum input {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    color: #333;
}
.m-selnum .less, .m-selnum .more {
    width: 1.2rem;
}
/*脚部*/
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.inner{
  display: flex;
}
.inner .btn.btn-icon {
    flex: 0 0 2.08rem
} .inner .w-button-ghostWhite {
    border-right: 0;
}.inner .btn {
    align-items: center;
    justify-content: center;
    height: 1.38667rem;
}
.u-icon-detail-kefu {
    background-image: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-aaf8414a44.png);
    width: .8rem;
    height: .8rem;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.inner .btn.btn-text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
} .inner .w-button-ghostWhite {
    border-right: 0;
} 
.w-button, .w-button:focus, .w-button:visited {
    display: inline-block;
    vertical-align: middle;
    width: 3.36rem;
    text-align: center;
    line-height: .90667rem;
    font-size: .37333rem;
    color: #fff;
    border: 1px solid #b4282d;
    background-color: #b4282d;
    overflow: hidden;
}
.w-button-xxl, .w-button-xxl:focus, .w-button-xxl:visited {
    line-height: 1.28rem;
}
.inner .btn.btn-text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
 .inner .btn {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    height: 1.38667rem;
}
.w-button-ghostWhite, .w-button-ghostWhite:focus, .w-button-ghostWhite:visited {
    border-color: #c7c7c7;
    color: #333;
    background-color: #fff;
}
</style>